<template>
    <div class="content">
        <el-steps  :active="list.status == 2 ? '3' : (list.status == 4 ? '1' : (list.status == 2 ? '4' : ''))" finish-status="success" align-center>
            <el-step title="提交订单" :description="formateDate(createTime)" />
            <el-step title="支付订单" :description="formateDate(paymentTime)" />
            <el-step title="平台发货" :description="formateDate(deliveryTime)" />
            <el-step title="确定发货" :description="formateDate(receiveTime)" />
            <el-step title="完成评价" description="" />
        </el-steps>
        <div class="wrap">
            <div class="top">
                <div class="left">
                    <el-icon>
                        <Warning />
                    </el-icon>
                    <span>当前订单状态：{{
                list.status == 0 ? '待付款' : (list.status == 1 ? '待发货' : (list.status == 2 ?
                    '已发货' : (list.status == 3 ?
                        '已完成' : (list.status == 4 ? '已关闭' : ''))))
            }}</span>
                </div>
                <div>
                    <el-button size="small" @click="deleUser">删除订单</el-button>
                    <el-button size="small" @click="orderRemark">备注订单</el-button>
                </div>
            </div>
            <div class="basic">
                <div class="title">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    <span class="font-small">基本信息</span>
                </div>
                <table style="width: 849px;" cellspacing="0">
                    <th>订单编号</th>
                    <th>发货单流水号</th>
                    <th>用户账号</th>
                    <th>支付方式</th>
                    <th>订单来源</th>
                    <th>订单类型</th>
                    <tbody>
                        <td> {{ list.orderSn }}</td>
                        <td>暂无</td>
                        <td> {{ list.memberUsername }}</td>
                        <td>{{ list.payType == 0 ? '未支付' : (list.payType == 1 ? '支付宝' : (list.payType == 2 ? '微信' : '')) }}</td>
                    <td>{{ list.sourceType == 1 ? 'APP订单' : 'PC订单' }}</td>
                    <td>{{ list.orderType === 0 ? '正常订单' : '秒杀订单' }}</td>
                    </tbody>
                </table>
                <table style="width: 849px; margin-top: 0;" cellspacing="0">
                    <th>配送方式</th>
                    <th>物流单号</th>
                    <th>自动收货时间</th>
                    <th>订单可得优币</th>
                    <th>订单可得值</th>
                    <th>活动信息</th>
                    <tbody>
                        <td> {{ list.deliveryCompany }}</td>
                        <td>{{ list.deliverySn }}</td>
                        <td> {{ list.autoConfirmDay }}天</td>
                        <td>{{ list.integration }}</td>
                        <td>{{ list.integration }}</td>
                        <td class="hid">{{ list.promotionInfo }}</td>
                    </tbody>
                </table>
            </div>  
             <div class="basic">
                <div class="title">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    <span class="font-small">收货人信息</span>
                </div>
                <table style="width: 849px;" cellspacing="0">
                    <th>收货人</th>
                    <th>手机号码</th>
                    <th>邮政编码</th>
                    <th>收货地址</th>
                    <tbody>
                        <td> {{ list.receiverName }}</td>  
                        <td> {{ list.receiverPhone }}</td> 
                        <td> {{ list.receiverPostCode }}</td>
                        <td> {{ list.receiverProvince }}{{ list. receiverCity}}{{ list.receiverRegion }}{{ list.receiverDetailAddress }}</td>
                    </tbody>
                </table>
            </div>  
            <div class="basic">
                <div class="title">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    <span class="font-small">商品信息</span>
                </div>
                   
                <!-- <table style="width: 849px;" cellspacing="0">
                    <th style="background:#fff;">商品图片</th>
                    <th style="background:#fff;">商品名称</th>
                    <th style="background:#fff;">价格/货号</th>
                    <th style="background:#fff;">属性</th>
                    <th style="background:#fff;">数量</th>
                    <th style="background:#fff;">小计</th>
                    <tbody v-for="item in orderItemList" :key="item.id">
                        <td class="img"><el-image style="width: 80px; height: 80px" :src="item.productPic"/></td>
                        <td> {{ item.productName}}<br/> 品牌:{{ item.productBrand }}</td> 
                          <td>价格：￥{{ item.productPrice}}<br/> 货号:{{ item.productSn }}</td>  
                          <td>{{ item.productAttr}}</td>  
                          <td>{{ item.productQuantity}}</td>  
                          <td>￥{{ item.productPrice}}</td>  
                    </tbody>
                </table> -->
                <el-table :data="list.orderItemList" border style="width: 849px;margin-top:20px;">
                <el-table-column label="商品图片">
                    <template #default="{ row }">
                        <img style="width:80px;height:80px" :src="row.productPic" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" width="200">
                    <template #default="{ row }">
                        <p>{{ row.productName }}</p>
                        <p>{{ "品牌："+row.productBrand }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="价格/货号">
                    <template #default="{ row }">
                        <p>{{ "价格：￥"+ (row.productPrice) }}</p>
                        <p>{{ "货号："+row.productSn }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="属性" prop="productAttr">
                    <!-- <template #default="{ row }">
                        <span v-for="item in row.productAttr">
                            {{ item.key }}{{ item.value }}</span>
                    </template> -->
                </el-table-column>
                <el-table-column prop="productQuantity" label="数量" />
                <el-table-column label="小计">
                    <template #default="{ row }">
                        ￥{{ row.productPrice}}
                    </template>
                </el-table-column>
            </el-table>
            </div> 
            <div style="float: right; margin: 20px ;">合计：<span style="color:#f56c6c;">￥{{ list.totalAmount }}</span></div>
            <div class="basic" style="margin-top: 40px ;">
                <div class="title">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    <span class="font-small">费用信息</span>
                </div>
                <table style="width: 849px;" cellspacing="0">
                    <th>商品合计</th>
                    <th>运费</th>
                    <th>优惠券</th>
                    <th>积分抵扣</th>
                    <tbody>
                        <td> ￥{{ list.totalAmount }}</td>
                        <td>￥{{ list.freightAmount }}</td>
                        <td> -￥{{ list.couponAmount }}</td>
                        <td>-￥{{list.integrationAmount}}</td>
                    </tbody>
                </table>
                <table style="width: 849px; margin-top: 0;" cellspacing="0">
                    <th>活动优惠</th>
                    <th>折扣金额</th>
                    <th>订单总金额</th>
                    <th>应付款金额</th>
                    <tbody>
                        <td> -￥{{ list.promotionAmount }}</td>
                        <td>-￥{{ list.discountAmount }}</td>
                        <td style="color:#f56c6c;"> ￥{{ list.totalAmount }}</td>
                        <td style="color:#f56c6c;">￥{{ list.payAmount }}</td>
                    </tbody>
                </table>
            </div>  
            <div class="basic">
                <div class="title">
                    <el-icon>
                        <Briefcase />
                    </el-icon>
                    <span class="font-small">操作信息</span>
                </div>
                   
                <!-- <table style="width: 849px;" cellspacing="0">
                    <th style="background:#fff;">操作者</th>
                    <th style="background:#fff;">操作时间</th>
                    <th style="background:#fff;">订单状态</th>
                    <th style="background:#fff;">付款状态</th>
                    <th style="background:#fff;">发货状态</th>
                    <th style="background:#fff;">备注</th>
                    <tbody v-for="item in historyList" :key="item.id">
                        <td>{{ item.operateMan }}</td>
                        <td>{{ formateDate(item.createTime) }}</td> 
                        <td v-if="item.orderStatus===0">待付款</td>
                        <td v-else-if="item.orderStatus===1">待发货</td>
                        <td v-else-if="item.orderStatus===2">已发货</td>
                        <td v-else-if="item.orderStatus===3">已完成</td>
                        <td v-else-if="item.orderStatus===4">已关闭</td>
                        <td v-if="item.orderStatus===2">已支付</td>
                        <td v-else-if="item.orderStatus===4">已退款</td>
                        <td>已发货</td>  
                        <td>{{item.note}}</td>  
                    </tbody>
                </table> -->
                <el-table :data="list.historyList" border style="width: 849px;margin-top:20px;" table-layout="auto"
                cell-class-name="align-c">
                <el-table-column prop="operateMan" label="操作者" />
                <el-table-column label="操作时间">
                    <template #default="{ row }">
                        <p>{{ formateDate(row.createTime) }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态">
                    <template #default="{ row }">
                        <p>{{
                            row.orderStatus == 0 ? '待付款' : (row.orderStatus == 1 ? '待发货' : (row.orderStatus == 2 ?
                                '已发货' : (row.orderStatus == 3 ?
                                    '已完成' : (row.orderStatus == 4 ? '已关闭' : ''))))
                        }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="付款状态">
                    <template #default="{ row }">
                        <p>{{
                            row.orderStatus == 0 ? '待付款' : (row.orderStatus == 1 ? '待发货' : (row.orderStatus == 2 ?
                                '已支付' : (row.orderStatus == 3 ?
                                    '已完成' : (row.orderStatus == 4 ? '已退款' : ''))))
                        }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="发货状态">
                    <template #default="{ row }">
                        <p>{{
                            row.orderStatus == 2 ?
                                '已发货' : (row.orderStatus == 4 ? '已发货' : '')
                        }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="note" label="备注" />
            </el-table>
            </div> 
        </div>
    </div>
    <orderRemarks :isShow="showDialog" :status="isStatus" @hide="closeDialog" />
</template>

<script setup lang="ts">
import { getOrderRoleIdApi,DeleteOrderApi } from './api';
import { Warning, Briefcase } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from 'element-plus';
import { formateDate } from '@/utils'
import { ref,computed } from "vue"
import { useRoute,useRouter } from "vue-router"
import orderRemarks from "./orderRemarks.vue"

const route = useRoute()
const router = useRouter()

const showDialog = ref(false)

const isStatus = ref(0)
const closeDialog = (isReload?: boolean) => {
  showDialog.value = false;
  if (isReload) getOrderId();
};
// 备注订单
const orderRemark = () => {
    showDialog.value = true
}

// 提交订单时间
const createTime = ref()
// 支付订单时间
const paymentTime = ref()
// 平台发货时间
const deliveryTime = ref()
const receiveTime=ref()
// 表格数据
const list = ref<OrderModel>({} as any)
// 商品信息
const orderItemList = ref<OrderItemList>({} as any)
// 操作信息
const historyList = ref<HistoryList>({} as any)
// 删除订单
const deleUser = () => {
    ElMessageBox.confirm("是否要进行该删除操作?", "提示?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    }).then(() => {
        DeleteOrderApi(parseInt(route.query.id as string)).then(res => {
            if (res.code === 200) {
                ElMessage.success('删除成功')
                router.push('/oms/order')
            }
        })
    })
}
// 请求订单数据
const getOrderId = () => {
if (route.query.id) {
    getOrderRoleIdApi(parseInt(route.query.id as string)).then((res) => {
        if (res.code === 200) {
            list.value = res.data
            createTime.value = res.data.createTime
            paymentTime.value = res.data.paymentTime
            deliveryTime.value = res.data.deliveryTime
            receiveTime.value = res.data.receiveTime
            orderItemList.value =res.data.orderItemList
            historyList.value=res.data.historyList
            isStatus.value=res.data.status
        }

    })
}
}
getOrderId();
</script>

<style lang="less" scoped>
.content {
    width: 80%;
    margin: 0 auto;

    .wrap {
        width: 100%;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        color: #303133;

        .top {
            background: rgb(242, 246, 252);
            width: 100%;
            height: 80px;
            line-height: 80px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            align-items: center;
            box-sizing: border-box;

            .left {
                color: #f56c6c;
                display: flex;
                align-items: center;
            }
        }

        .basic {
            padding: 20px;

            .title {
                display: flex;
                align-items: center;

                .font-small {
                    font-size: 14px;
                    color: #606266;
                }
            }

            table {
                width: 100%;
                margin-top: 20px;

                th {
                    border: 1px solid #dcdfe6;
                    padding: 10px;
                    font-size: 14px;
                    text-align: center;
                    background: rgb(242, 246, 252);
                    color: #303133;

                }

                td {
                    border: 1px solid #dcdfe6;
                    height: 60px;
                    line-height: 40px;
                    color: #606266;
                    overflow: hidden;
                    text-align: center;
                }

                .hid {
                    width: 141px;
                    height: 60px;
                    line-height: 40px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>